

Ext.define("NotesApp.view.NotesListContainer",// 类名 
{
	// 继承
    extend: "Ext.Container", 
    
    // xtype 别名
    // 定义了一个xtype 其他类可以使用这个xtype 引入这个类
    alias: "widget.noteslistcontainer", 

	// 初始化
    initialize: function () {

        this.callParent(arguments);

		// 实例化控件
		var newButton = {
            xtype: "button",		// button组件
            text: 'New',			// 名字
            ui: 'action',		// 样式
            handler: this.onNewButtonTap,//事件(点击)
            scope: this,
            id : "new-note-btn"	// id
            
        };

        var topToolbar = {
            xtype: "toolbar",
            title: 'My Notes',
            docked: "top",
            items: [
                { xtype: 'spacer' },// Spacer组件(占位)
                newButton			// newButton组件
            ]
        };
        
        var notesList = {
            xtype: "noteslist",
            store: Ext.getStore("Notes"),//存储方式
            listeners: {
                disclose: { 
                		fn: this.onNotesListDisclose, //事件(disclose) 出现时触发
                		scope: this 
                }
            }
        };
        
        this.add([topToolbar,notesList]);
        
    },
    
    // 事件
    onNewButtonTap: function () {
		console.log("呱");
		// 通知 控制器接受 
		// 1.这样便于维护 : controller只需要响应这个通知即可 不需要了解view内部结构（不管怎么出发的）
        this.fireEvent("newNoteCommand", this); 
    },
    
    // 事件
    onNotesListDisclose: function (list, record, target, index, evt, options) {
	    console.log("editNoteCommand");
	    this.fireEvent('editNoteCommand', this, record);
	},	
    
    config: {
        layout: {
            type: 'fit'
        }
    }

    // 添加组件
    // 不用了 太乱?
    /*
     config: {
    		// 组件
        items: [{xtype: "toolbar", // toolbar组件
	             docked: "top",
	             title: "My Notes",
	             items: [{
			                xtype: "spacer" // Spacer组件(占位)
			           	 }, 
			           	 {
			                xtype: "button",		// button组件
			                text: "+",			// 名字
			                ui: "action",		// 样式
			                id:"new-note-btn"	// id
			             }]
        			}]
    }
     */
    
});

